Menu tabs con Efecto

A continuación, se muestra un ejemplo de cómo crear un menú de pestañas con un efecto de transición utilizando solo CSS y el selector :has().

HTML

<style>
  .tabs {
    position: relative;
    display: flex;
  }

  .tabs label {
    padding: 10px 20px;
    cursor: pointer;
  }

  .tabs input {
    display: none;
  }

  .track {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: #000;
    clip-path: inset(0 var(--x2, 100%) 0 var(--x1, 0));
    transition: --x1 0.2s, --x2 0.2s 0.1s;
  }

  .tabs:has(#tab1:checked) .track {
    --x1: 0%;
    --x2: 66.66%;
  }

  .tabs:has(#tab2:checked) .track {
    --x1: 33.33%;
    --x2: 33.33%;
  }

  .tabs:has(#tab3:checked) .track {
    --x1: 66.66%;
    --x2: 0%;
  }
</style>
<div class="tabs">
  <input type="radio" name="tab" id="tab1" checked>
  <label for="tab1">Pestaña 1</label>

  <input type="radio" name="tab" id="tab2">
  <label for="tab2">Pestaña 2</label>

  <input type="radio" name="tab" id="tab3">
  <label for="tab3">Pestaña 3</label>

  <div class="track"></div>
</div>

Explicación Breve

• HTML: Tenemos un contenedor .tabs que contiene los inputs de tipo radio y sus etiquetas correspondientes para simular las pestañas. La div con clase .track será la barra de seguimiento que se mueve debajo de las pestañas.

• CSS:

  • La .track utiliza clip-path con variables CSS --x1 y --x2 para controlar qué parte de la barra es visible.
  • Las transiciones se aplican a las variables --x1 y --x2 para animar el movimiento de la barra.
  • Usamos :has() para seleccionar el estado del input que está :checked y ajustar las variables --x1 y --x2 en consecuencia.